<template>
  <el-dialog :title="`${data.title ? '修改':'新增'}文章`" :visible.sync="show" width="1000px" @closed='gaunbi' @open='open'>
    <el-form :model="date" :rules="rules" label-width="80px">
      <el-form-item prop='title' label="标题名称">
        <el-input v-model="date.title"></el-input>
      </el-form-item>
      <el-form-item label="文章内容" prop='articleBody'>
        <div class="container">
          <quillEditor class='rich-text' :options='editorOption' v-model="date.articleBody" />
        </div>
      </el-form-item>
      <el-form-item label="视频地址" prop='videoURL'>
        <el-input v-model="date.videoURL"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="show = false">取 消</el-button>
      <el-button type="primary" @click="xiugaitijiao">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>

import { add, update } from '@/api/hmmm/articles'

// require styles 引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import questionsSelect from '@/module-hmmm/components/questions-select'

export default {
  name: 'chacaoAdd',
  components: {
    quillEditor,
    questionsSelect
  },
  props: {
    data: {
      type: Object,
      default: function () {
        return {
          title: '',
          articleBody: '',
          videoURL: ''
        }
      }
    }
  },
  data () {
    return {
      show: false,
      date: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      datq: {},
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { min: 1, max: 60, message: '长度在 3 到 60 个字符', trigger: 'blur' }
        ],
        articleBody: [
          { required: true, message: '请输入内容', trigger: 'blur' },
        ]
      },
      // 富文本配置对象
      // 富文本配置
      editorOption: {
        placeholder: '',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ header: 1 }, { header: 2 }],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ indent: '-1' }, { indent: '+1' }],
            ['image']
          ]
        }
      }
    }
  },
  methods: {
    open () {
      this.date = this.data
      console.log(this.date)
    },
    gaunbi () {
      this.date = this.datq
    },
    xiugaitijiao () {
      this.show = false
      console.log(this.date)
      return this.date.id ? this.xiugai() : this.tianjia()
    },
    // --------------------------------------------------------------------------------------
    xiugai () {
      console.log('修改')
      this.update(this.date)
    },
    async update (a) {
      try {
        await update(a)
        this.$message.success('修改成功')
        await this.$router.push('/articles/list')
      } catch (e) {
        console.log(e)
      }
    },
    // ======================================================================================
    tianjia () {
      // 打印data
      console.log('添加')
      // 赋值到date
      // this.date.title = this.data.title
      // this.date.articleBody = this.data.articleBody
      // this.date.videoURL = this.data.videoURL
      // 打印date
      console.log(this.date)
      this.add(this.date)
    },
    async add (a) {
      try {
        await add(a)
        this.$message.success('添加成功')
        await this.$router.push('/articles/list')
      } catch (e) {
        console.log(e)
      }
    },
  },
  created () {
  }
}
</script>
<style scoped lang='less'>
.container {
  /deep/ .rich-text {
    height: fit-content;

    .ql-container {
      min-height: 200px;
      max-height: 400px;
      overflow: auto;
    }
  }
}
</style>
